<template>
      <!-- <p>首页</p> -->
      <div id="home" class="wrapper">
    <nav-bar class="home-nav">
      <div slot="center">购物街</div>
    </nav-bar>

  
<VScrollItem class="content"
 ref="scroll"
            :probe-type="3"
            @scroll="contentScroll"
            :pull-up-load="true"
            @pullingUp="loadMore"
>
      <home-swiper-vue :banners="banners"/>
    <RecommendView :recommends="recommends"/>
    <FeatureViewVue/>
    <TabControlVue id="tab-control" 
    class="tab-control"  
    :class="{'is_fixed':isFixed}"  
    :titles="['流行','新款','精选']" 
    @tabClick="tabClick"
    ref="tabControl2"/>
      <GoodsListVue :goods="goods[currentType].list"/>
</VScrollItem>
  <back-top @click.native="backClick" v-show="isShowBackTop"/>
     </div>
</template>


<script>
import NavBar from '@/components/common/navbar/NavBar.vue'
import { getHomeMultidata, getHomeData } from '@/network/home'
import HomeSwiperVue from './childComps/HomeSwiper.vue'
import TabControlVue from '@/components/content/tabControl/TabControl.vue'
import RecommendView from './childComps/RecommendView.vue'
import FeatureViewVue from './childComps/FeatureView.vue'
import GoodsListVue from '@/components/content/goods/GoodsList.vue'
import VScrollItem from '@/components/common/scroll/Vscroll.vue'
 import BackTop from 'components/content/backTop/BackTop'
 import {debounce} from 'common/utils'
 import {itemListener} from "../../common/mixin"


export default {
name:'HomeItem',
minxins: [itemListener],
data(){
  return {
    banners:[],
    recommends:[],
    goods:{
      'pop':{page: 0, list:[]},
      'new':{page: 0, list:[]},
      'sell':{page: 0, list:[]}
    },
    currentType:'pop',
    isFixed: false,
      OffsetTop: 0, 
       isShowBackTop: false,
       observeDOM: true,
        saveY: 0,
        //对图片进行监听
        itemImgListener: null
  }
},
mounted() {
    // 事件监听滚动条
 window.addEventListener('scroll', this.initHeight);
    this.$nextTick(() => {
    //获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 
    this.offsetTop = document.querySelector('#tab-control').offsetTop;
    })

    //设置防抖动
    const refresh = debounce(this.$refs.scroll.refresh, 50)
    this.$bus.$on('itemImageLoad', ()=>{
      refresh()
    })
    let newRefresh = debounce(this.$refs.scroll.refresh, 100)
    //对监听的事件进行保存
    this.itemImgListener = () =>  {
      newRefresh()
    }
    
},
//回调中移除监听
destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
},
  methods: {  
 //事件监听相关
 tabClick(index){
// console.log(index);
switch (index) {
  case 0:
    this.currentType ='pop'
    break;
    case 1:
      this.currentType ='new'
      break;
      case 2:
        this.currentType = 'sell'
        break;
}
 },
  
/********* start-目录吸顶********/
initHeight() {
// 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 (被卷曲的高度)
         var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
//如果被卷曲的高度大于吸顶元素到顶端位置 的距离
          this.isFixed = scrollTop > this.offsetTop ? true : false;
},
/********* end-目录吸顶********/

// 获取信息展示
getHomeMultidata(){
    getHomeMultidata().then(res =>{
    console.log(res);
    this.banners = res.data.banner.list;
    this.recommends = res.data.recommend.list;
  });
},
getHomeData(type){
  //获取当前页面进行加一操作 +1
  const page = this.goods[type].page + 1;
    getHomeData(type,page).then(res =>{
    console.log(res);
    //将数组数据传入
   this.goods[type].list.push(... res.data.list);
   //设置页数加一
   this.goods[type].page +=1;

  })
},
//设置点击回归到顶端
 backClick() {
        this.$refs.scroll.scrollTo(0, 0,500)   //第三个参数设置毫秒数
      },
      contentScroll(position) {
        this.isShowBackTop = (-position.y) > 1000
      },
      loadMore() {
        this.getHomeGoods(this.currentType)
      },
  },
components:{
    NavBar,
    HomeSwiperVue,
    RecommendView,
    FeatureViewVue,
    TabControlVue,
    GoodsListVue,
   VScrollItem,
   BackTop
},
activated(){
this.$refs.scroll.scrollTo(0,this.saveY, 1);
},
deactivated(){
  this.saveY = this.$refs.scroll.getScrollY() //函数带()
},
created(){
  //请求头部的信息
  this.getHomeMultidata();
  //请求商品信息 流行
 this.getHomeData('pop');
  //请求商品信息 新款
  this.getHomeData('new');
   //请求商品信息 精选
   this.getHomeData('sell');
   
   //监听item中图片加载完成 获取加载失败 下拉失败，无法展示
   this.$bus.$on('itemImageLoad', ()=> {
    console.log('------------------');
   })
}
}
</script>

<style scoped>
#home {
  padding-top:44px;
  height: 100vh;
  position: relative;
 
}

.home-nav{
  background-color: var(--color-tint);
  color: #fff;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
}
/* 吸顶效果展示 */
.tab-control{
  position: -webkit-sticky;
    width: 100%;
  /* height: 30px; */
  background-color: #fff;
  z-index: 9;
}

.is_fixed{
     width: 100%;
     position: sticky;
     top: 44px;
     z-index: 999;
}

  .content {
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0;
    
  }
</style>